<template>
  <div id="Login">
    <div class="reg">
      <a href="/index.php?s=/shop/user/register">注册</a>
    </div>
    <div class="logo">
      <img src="../assets/images/logo_1.png" alt="">
    </div>
    <group>
      <p>手机号码</p>
      <x-input v-show="isInput" v-model="userName" :max="13" is-type="china-mobile" placeholder="请输入正确手机号" v-on:change="checkStock(val)" autocomplete="off"></x-input>
      <p>密码</p>
      <x-input v-show="isInput" type="password" placeholder="请输入正确密码" v-model="userPass" @on-enter="loginFun" autocomplete="off"></x-input>
    </group>
    <a href="/index.php?s=/shop/user/forget_password" class="chan">忘记密码</a>

    <group style="padding:5px 25px">
      <x-button type="primary" action-type="button" @click.native="loginFun">登录</x-button>
      <check-icon :value.sync="ch">我已阅读并同意<a href="/index.php?s=/shop/user/perfect_information_protocol">《能源宝平台入驻协议（v4.9）》</a></check-icon>
    </group>

    <div class="bottom-logo"><img src="../assets/images/logo_2.png" alt=""></div>
    <div v-transfer-dom>
      <alert v-model="showAlert"> {{ contentAlert }}</alert>
    </div>
  </div>
</template>

<script>

  import { Group, Cell, XInput, XButton ,CheckIcon , AlertModule, Alert, TransferDomDirective as TransferDom } from 'vux'
  import { login } from '../mock/api'
  import { getmd5 } from '../aes/aes'
  import { cookie } from 'vux'

  export default {
    directives: {
      TransferDom
    },
    components: {
      Group,
      Cell,
      XInput,
      XButton,
      CheckIcon,
      Alert
    },
    data () {
      return {
        userName: "",
        userPass: "",
        ch:true,
        isInput:false,
        showAlert: false,
        contentAlert:''
      }
    },
    computed:{

    },
    created () {

    },
    mounted(){
      setTimeout(()=>{
        this.isInput = true;
        this.userName="";
        this.userPass="";
      },1)
    },
    methods: {
      loginFun(){
        let vue = this;
        var qs = require('qs');
        var json={
          phone:this.userName,
          passwd:getmd5(getmd5(this.userPass))
        }
        if(this.userName=='' && this.userPass==''){
          this.showAlert=true;
          this.contentAlert='请重新输入用户名和密码';
          return false;
        }
        login(json).then((res) => {
          if(res.code==2000){
            var gid='';
            if(res.data.gid){
              gid=res.data.gid;
            }else{
              gid =res.data.group_id;
            }
            cookie.set('uid',res.data.uid);
            cookie.set('gid',gid);
            cookie.set('key',res.data.key);
            cookie.set('iv',res.data.iv);
            cookie.set('access_token',res.data.access_token);
            this.$router.replace({ name: 'PurchaseIndex'})
            // window.location.href='/index.php?s=/shop/index/purchase';
          }else{
            this.showAlert=true;
            this.contentAlert=res.message;
            setTimeout(function(){
              window.location.href='/index.php?s='+res.data;
            },1500)
          }
        });
      },
      checkStock(val){
        alert(val);
      }
    }
  }
</script>

<style lang="less">
@green:#51ac33;
@rem:1rem/75;
  .logo {
    text-align: center;
    img{
      width: 2.5rem;
    }
  }
  #Link .weui-cell{
    padding:15px;
  }
 #Login .weui-cells{
   background: #F5F5F5;
 }
  .weui-label{
    font-size: 14px;
  }
  .phone .weui-label{
    color: #08cf4e;
  }
  .weui-btn_primary{
    background: -webkit-linear-gradient(#70cd51, #51ac33); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#70cd51, #51ac33); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#70cd51, #51ac33); /* Firefox 3.6 - 15 */
    background: linear-gradient(#70cd51, #51ac33); /* 标准的语法 */
  }
  .chan{
    display: block;
    color: @green;
    font-size: 13px;
    padding: 5px 25px;
  }
  #Login{
    .weui-cells:before,.weui-cells:after{
        border:0px;
    }
    .weui-cell{
      padding: 10px 25px;
    }
    .weui-cell:before{
      border:0px;
    }
    .weui-cell:after{
      right:25px;
      content: " ";
      position: absolute;
      bottom: 0;
      height: 1px;
      border-top: 1px solid #D9D9D9;
      color: #D9D9D9;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      left: 25px;
    }
    p{
      padding: 0px 25px;
      margin-top:20px;
      margin-bottom:3px;
      color: #000;
      font-size: 15px;
    }
    .vux-check-icon{
      font-size: 12px;
      margin-top:10px;
    }
    .weui-icon-success,.weui-icon-circle{
      font-size: 15px;
    }
    .vux-check-icon > span{
      font-size: 12px;
      a{
        color: @green;
        font-size: 12px;
      }
    }
    .reg{
      width: 100%;
      text-align: right;
      padding: 10px 25px;
      a{
        color: @green;
        font-size: 14px;
      }

    }
    .bottom-logo{
      position: relative;
      margin-top:4.5rem;
      text-align: center;
      img{
        width: 100px;
      }
    }
    .vux-x-input .vux-input-icon{
      font-size: 20px;
      margin-top:-6px;
    }
    .vux-input-icon.weui-icon-warn:before, .vux-input-icon.weui-icon-success:before{
      font-size: 15px;
    }
  }
</style>
